<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid #333;
			}
		</style>
	</head>
	<body>
		<!-- canvas画布的大小，不能用css来调整，用属性来调整 -->
		<canvas id="canvas" width="600" height="400"></canvas>
		
	</body>
	<script type="text/javascript">
		//获取画布
		let canvas=document.getElementById("canvas");
		//获取上下文
		let ctx=canvas.getContext("2d");


		// let x=100,y=100;
		// ctx.font="30px 微软雅黑";		//设置文本大小和字体
		// ctx.fillStyle="red";			//文本颜色
		// ctx.fillText("今天周四了",x,y)		//文本内容和位置
		
		//空心文本
		// ctx.font="60px 微软雅黑";
		// ctx.strokeStyle="red"
		// ctx.strokeText("明天周五了",100,200)

		// //绘制竖线
		// ctx.moveTo(100,0)
		// ctx.lineTo(100,400)
		// ctx.stroke()
		
		// // 水平对齐
		// ctx.font="30px Arial";
		// ctx.textAlign="left"
		// ctx.textAlign="center"
		// // ctx.textAlign="right"
		// ctx.fillText("后天周六了",100,100)
		
		
		//水平直线
		// ctx.moveTo(0,100)
		// ctx.lineTo(600,100)
		// ctx.stroke()
		
		// //文本
		// ctx.font="30px Arial";
		// //竖直方向对齐方式
		// ctx.textBaseline="middle";    //top middle bottom alphabetic
		// ctx.fillText("马上周末了xX",100,100)
		

		
	</script>
</html>